<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="单词详细" bgColor="transparent" :h5Show="false"></Navbar>
		<view style="display: flex; justify-content: space-between;">
			<u--text bold size="30" :text="data.english"></u--text>
			<PlayAudio size="24px" :path ="data.voiceFilesPath"></PlayAudio>
		</view>
		<view style="margin-top: 5px;">
			<u--text type="info" size="16" :text="data.phoneticSymbol"></u--text>
		</view>
		<u-list v-if="data.partOfSpeechSelectList" height="auto" style="margin-top: 18px;padding-left: 5px;" key="activeKey" >
			<u-list-item v-for="(item, index) in data.partOfSpeechSelectList" :key="index">
				<view style="display: flex; align-items: center;margin-bottom: 2px;">
					<view style="font-size: 12px;color: #9093b3;padding-right: 20px;">{{item.partOfSpeech}}</view>
					<u--text bold size="16" :text="item.meaningInChinese"></u--text>
				</view>
			</u-list-item>
		</u-list>

		<view style="margin-top: 10px;">
			<view style="font-size: 12px;color: #9093b3;">【例句】</view>
			<u--text style="padding-left: 5px;" bold size="14" :text="data.exampleSentenceHero"></u--text>
			<u--text style="padding-left: 5px;" bold type="info" size="14" :text="data.exampleSentenceMiddle"></u--text>
		</view>

	</view>
</template>

<script>
	import * as IndexApi from '@/api/index'
	import Navbar from '@/components/navbar/Navbar'
	import PlayAudio from './playAudio'

	export default {
		components: {
		  Navbar,
		  PlayAudio,
		},
		data() {
			return {
				isShow: true,
				params: {
					pageNum: 0,
					pageSize: 10
				},
				data: {},
				id: null,
			}
		},
		created() {
		},
		onLoad(params) {
			this.id = params.id;
			this.loadData(params.id)
		},
		methods: {
			// 加载通知公告数据
			loadData(id) {
				IndexApi.learningMaterials(id).then(res => {
					console.log("res", res);
					this.data = res.data;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>